<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";
import { onShow } from "@dcloudio/uni-app";
import _ from "lodash";
import assets from "@/utils/assets";
import { handleBack } from "@/utils/commonUtils";
import ComNavBar from "@/components/ComNavBar/index.vue";

let emit = defineEmits(["scrolltolower"]);

let props = defineProps(["title"]);
let { title } = toRefs(props);

let scrolltolower = () => {
  emit("scrolltolower");
};
</script>

<template>
  <div class="page">
    <ComNavBar :title="title" color="#303133">
      <template #left>
        <img :src="assets.arrow_back" class="arrow_back" @click="handleBack" />
      </template>
    </ComNavBar>
    <div class="scroll-wrap">
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        @scrolltolower="scrolltolower"
      >
        <slot></slot>
      </scroll-view>
    </div>
    <div class="footer-bg">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page {
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.arrow_back {
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}
.scroll-wrap {
  flex: 1;
  overflow: hidden;
}
.scroll-Y {
  height: 100%;
  background: #f4f5fb;
  padding: 20rpx 0;
  box-sizing: border-box;
}

.footer-bg {
  background: #f4f5fb;
}
</style>
